<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>内容管理中心-栏目管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layui-form layuiadmin-card-header-auto" id="selectWebsite">
                <!-- <div class="layui-col-xs3"> -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width:auto;">站点</label>
                        <div class="layui-input-inline" id="websitediv">
                        </div>
                        <script type="text/html" id="websitetemp">
                            <select name="Website" id="Website" lay-filter="Website" class="layui-form-select" lay-search>

                                    {{# layui.each(d.data, function (index, item) { }}
                                    <option value="{{item.WebsiteId }}">{{item.Title }}</option>
                                    {{# })  }}
                                </select>
                        </script>
                    </div>
                </div>
                <!-- </div> -->

            </div>
            <div class="layui-card-body">
                <script id="toolbar" type="text/html">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="fold" id="btnAdd" style="display:none"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                        <button class="layui-btn layui-btn-sm" lay-event="spread" id="btnSpread"><i class="layui-icon layui-icon-down"></i>展开</button>
                        <button class="layui-btn layui-btn-sm" lay-event="fold" id="btnFold"><i class="layui-icon layui-icon-up"></i>折叠</button>
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="query-submit" id="btnRefresh">
                            <i class="layui-icon layuiadmin-button-btn layui-icon-refresh"></i>刷新
                        </button>
                    </div>
                </script>
                <div style="height:82%; width: 98%;padding: 0px;background: #fff;position: fixed;left: 15px;"
                    class="tree">
                    <table id="basicInfo" lay-filter="basicInfo"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="bar">
        {{# if(d.NID != null){ }}
        {{# if(d.NodeStatus==1){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal"
            lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</a>
        {{# } }}
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        {{# if(d.NodeStatus==1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="up"><i class="layui-icon layui-icon-up"></i>上移</a>
        <a class="layui-btn layui-btn-xs" lay-event="down"><i class="layui-icon layui-icon-down"></i>下移</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs"
            lay-event="setflag"><i class="layui-icon layui-extend-stop"></i>停用</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs"
            lay-event="setflag"><i class="layui-icon layui-icon-ok"></i>启用</a>
        {{# } }}
        <a class="layui-btn layui-btn-danger layui-btn-xs"
            lay-event="delflag"><i class="layui-icon layui-extend-stop"></i>删除</a>
        {{# } }}
    </script>
</body>

</html>
<script>
    var tableId = 'basicInfo', treeGrid = null, treeSelect = null;
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'table','treeGrid'],{
		data: {
			$layui: null,
			ptable: null,
            detailData: {},//详细信息
            basictype: 0,
            winhight: 0,
            Seeview: 1,//1展开 0折叠
            websiteId: 0,//站点ID
		},
		pageload: function (right) {
			console.log(right);
			var self = this;
            self.loadWebsiteList(function () {
                self.data.websiteId = $("#Website").val()
                self.listLoad();
            });
            self.pageEvent();
		},
        
            //获取站点列表
            loadWebsiteList: function (callback) {
                var self = this;
                lobsterlayui.GETAPI('tsAdmin.getwebsitelist').then(retdata=>{
                    var data = retdata["list"];
                    var websiteTpl = websitetemp.innerHTML, websiteView = document.getElementById('websitediv');
                    layui.laytpl(websiteTpl).render({ data: data }, function (html) {
                        websiteView.innerHTML = html;
                    });
                    layui.form.render();
                    if (callback) {
                        callback();
                    }
                })

            },

            //数据加载
            listLoad: function () {
                var self = this;
                self.data.ptable = layui.treeGrid.render({
                    id: tableId,
                    elem: '#' + tableId
                    ,headers: lobsterlayui.GetHeaderData()
                    , where: {
                        websiteId: self.data.websiteId
                    }
                    , method: 'get'
                    , idField: 'NID'
                    , url: lobsterlayui.GetLowCodeUrl('tsAdmin.getnodelist')
                    , cellMinWidth: 100
                    // , size: "1000"
                    , treeId: 'NID'//树形id字段名称
                    , treeUpId: 'ParentID'//树形父id字段名称
                    , treeShowName: 'NodeName'//以树形式显示的字段
                    , toolbar: '#toolbar'
                    , height: "full"
                    , isFilter: false
                    , iconOpen: false//是否显示图标【默认显示】
                    , isOpenDefault: false//节点默认是展开还是折叠【默认展开】
                    , spread: true
                    , cols: [[
                        { field: 'NodeName', title: '栏目名称' }
                        , { field: 'NID', title: '栏目ID', width: '10%' }
                        , { field: 'NodeSort', title: '序号', width: '8%' }
                        , { title: '操作', align: 'center', templet: '#bar', width: '30%' }
                    ]]
                    , page: false
                    , parseData: function (res) {//数据加载后回调
                        if (res.code == "0") {
                            $("#btnAdd").show();
                        } else {
                            $("#btnAdd").hide();
                        }
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.count, //解析数据长度
                            "data": res.data.data //解析数据列表
                        };
                    }
                    , onClickRow: function (index, o) {//单击行

                    }
                    , onDblClickRow: function (index, o) {//双击行

                    }, done: function (res) {
                        // $(".layui-table-view").height(self.data.winhight);


                        // var treedata = treeGrid.getDataTreeList(tableId);
                        // if (self.data.Seeview == 0) {
                        //     treeGrid.treeOpenAll(tableId, false);
                        // }
                        // else treeGrid.treeOpenAll(tableId, true);

                    }
                });
            },

            pageEvent: function () {
                var self = this;
                //搜索条件
                layui.form.on('select(Website)', function (data) {
                    self.data.websiteId = $("#Website").val()
                    self.listLoad();
                });

                //网格中按钮事件
                layui.treeGrid.on('tool(basicInfo)', function (obj) {
                    var data = obj.data;//当前行数据
                    self.data.detailData = data;//记录当前数据
                    var layEvent = obj.event;//获得lay-event的值
                    var infromID = obj.event == "add" ? "0" : data.NID; //主键NID
                    switch (layEvent) {
                        case "add"://新增子项
                            if (self.data.websiteId == -1) {
                                layer.msg("请选择站点再进行新增！");
                                return;
                            }
                            window.parentNode = {
                                parentID: data.NID,
                                parentNodeName: data.NodeName,
                                Levels: Number(data.NodeDepth) + 1,
                                NodeStatus: 1,
                                WebsiteId: self.data.websiteId
                            };//父级栏目
                            window.NID = 0;//当前栏目数据信息
                            layer.open({
                                type: 2,
                                title: "添加" + data.NodeName + "子栏目",
                                btn: ["保存", "关闭"],
                                content: "edit.html?appid="+lobsterlayui.GetUrlParam('appid'),
                                area: ['800px', '55%'],
                                maxmin: true,
                                success: function (layero, index) { },
                                yes: function (index, layero) {
                                    //获取参数
                                    var iframeWin = window[layero.find('iframe')[0]['name']]
                                        , iframeWindow = window['layui-layer-iframe' + index]
                                        , submitID = 'LAY-node-front-submit'
                                        , submit = layero.find('iframe').contents().find('#' + submitID);
                                    //提交数据信息
                                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (t) {
                                        var nodeInfo = t.field;
                                        self.saveInfo(nodeInfo, index);
                                    });

                                    submit.trigger('click');
                                }
                            })
                            break;
                        case "edit"://编辑
                            window.parentNode = {
                                parentID: 0,
                                parentNodeName: '',
                                Levels: 0,
                                NodeStatus: 1,
                                WebsiteId: self.data.websiteId
                            };//父级栏目编号
                            window.NID = data.NID;//当前栏目编号
                            layer.open({
                                type: 2,
                                title: "编辑" + data.NodeName + "栏目",
                                btn: ["保存", "关闭"],
                                content: "edit.html?appid="+lobsterlayui.GetUrlParam('appid'),
                                area: ['800px', '55%'],
                                maxmin: true,
                                success: function (layero, index) { },
                                yes: function (index, layero) {
                                    //获取参数
                                    var iframeWin = window[layero.find('iframe')[0]['name']]
                                        , iframeWindow = window['layui-layer-iframe' + index]
                                        , submitID = 'LAY-node-front-submit'
                                        , submit = layero.find('iframe').contents().find('#' + submitID);
                                    //提交数据信息
                                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (t) {
                                        var nodeInfo = t.field;
                                        //code只能是字母
                                        if (!/^[a-zA-Z]+$/.test(nodeInfo.NodeCode)) {
                                            layer.msg("栏目标识填写不正确");
                                            return false;
                                        }

                                        self.saveInfo(nodeInfo, index);

                                    });
                                    submit.trigger('click');
                                }
                            })
                            break;
                        case "up":
                            var confirm_msg = "";
                            lobsterlayui.GETAPI('tsAdmin.movenode',{nid: infromID,moveStatus: 0,}).then(retdata=>{
                                layer.msg("操作成功");
                                self.listLoad();
                            }).catch(res=>{
                                layer.msg(res.msg);
                            })
                            break;
                        case "down":

                            var confirm_msg = "";
                            lobsterlayui.GETAPI('tsAdmin.movenode',{nid: infromID,moveStatus: 1,}).then(retdata=>{
                                layer.msg("操作成功");
                                self.listLoad();
                            }).catch(res=>{
                                layer.msg(res.msg);
                            })
                            break;
                        case "setflag": //删除
                            var confirm_msg = "";
                            var nodestatus = 0;
                            if (data.NodeStatus == 1) {
                                confirm_msg = "确定停用?";
                                nodestatus = 0;
                            }
                            else {
                                confirm_msg = "确认启用?";
                                nodestatus = 1;
                            }
                            layer.confirm(confirm_msg, { icon: 3, title: "提示" },
                                function (index) {

                                    self.DisableNode(data.NID, nodestatus)

                                    self.listLoad();
                                });
                            break;
                        case "delflag":
                            layer.confirm("确定删除吗？", { icon: 3, title: "提示" },
                                function (index) {

                                    self.DelNodeInfo(data.NID);

                                    self.listLoad();
                                });
                            break;
                    }

                });

                //表头事件
                $(document).on('click', '#btnAdd', function () {
                    window.parentNode = {
                        parentID: -1,
                        parentNodeName: '',
                        Levels: 0,
                        NodeStatus: 1,
                        WebsiteId: self.data.websiteId
                    };//父级栏目信息
                    window.NID = 0;//当前栏目数据信息
                    layer.open({
                        type: 2,
                        title: "添加顶级栏目",
                        btn: ["保存", "关闭"],
                        content: "edit.html?appid="+lobsterlayui.GetUrlParam('appid'),
                        area: ['800px', '55%'],
                        maxmin: true,
                        success: function (layero, index) { },
                        yes: function (index, layero) {
                            //获取参数
                            var iframeWin = window[layero.find('iframe')[0]['name']]
                                , iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-node-front-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);


                            //提交数据信息
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (t) {
                                var nodeInfo = t.field;
                                if (!/^[a-zA-Z]+$/.test(nodeInfo.NodeCode)) {
                                    layer.msg("栏目标识填写不正确");
                                    return false;
                                }
                                self.saveInfo(nodeInfo, index);
                            });

                            submit.trigger('click');
                        }
                    })
                });

                //展开
                $(document).on('click', '#btnSpread', function () {

                    self.data.Seeview = 1;
                    var treedata = layui.treeGrid.getDataTreeList(tableId);
                    layui.treeGrid.treeOpenAll(tableId, true);
                });

                //折叠
                $(document).on('click', '#btnFold', function () {

                    self.data.Seeview = 0;
                    var treedata = layui.treeGrid.getDataTreeList(tableId);
                    layui.treeGrid.treeOpenAll(tableId, false);
                });

                //刷新
                $(document).on('click', '#btnRefresh', function () {

                    self.listLoad();
                });
            },

            //保存数据信息
            saveInfo: function (nodeInfo, index) {

                var self = this;
                nodeInfo.WebsiteId = self.data.websiteId;
                lobsterlayui.POSTAPI('tsAdmin.savenode',nodeInfo).then(retdata=>{
                    layer.close(index);
                    layer.msg("保存成功");
                    self.listLoad();
                })
            },

            //停用(启用)
            DisableNode: function (nid, nodestatus) {
                var self = this;
                lobsterlayui.GETAPI('tsAdmin.disablenode',{nid: nid,status: nodestatus}).then(retdata=>{
                    layer.msg("操作成功");
                    self.listLoad();
                })
            },

            //删除
            DelNodeInfo: function (nid) {
                var self = this;
                lobsterlayui.GETAPI('tsAdmin.deletenode',{nid: nid}).then(retdata=>{
                    layer.msg("操作成功");
                    self.listLoad();
                })
                
            }
    })
</script>